<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>添加相册-教师-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart>
	<div class="weui_tab tab-bottom">
		<div class="weui_tab_bd">
			<div class="weui_cells weui_cells_form" style="margin: 0;">
	            <div class="weui_cell">
	                <div class="weui_cell_bd weui_cell_primary">
	                    <textarea id="content" class="weui_textarea" placeholder="此时此刻说点什么呗……" rows="5"></textarea>
	                </div>
	            </div>
	            <div class="weui_uploader">
                    <div class="weui_uploader_bd">
                        <ul class="weui_uploader_files img-click" id="img1">
                        </ul>
                        <div class="weui_uploader_input_wrp" id="filePicker" style="margin-bottom: 20px; margin-left: 15px; width: 60px; height: 60px; border-radius: 5px;">
                        </div>
                    </div>
                </div>
	        </div>
	        <div class="weui_cells weui_cells_access" id="xs_div">
	            <a class="weui_cell" href="javascript:">
	                <div class="weui_cell_hd"><img src="<%=basePath %>/images/fasongduixiang@3x.png" alt="" style="width:20px;margin-right:10px;display:block"></div>
	                <div class="weui_cell_bd weui_cell_primary">
	                    <p>班级</p>
	                </div>
	                <div class="weui_cell_ft">请选择</div>
	            </a>
	        </div>
	        <div class="weui_btn_area">
		        <a href="javascript:" class="weui_btn bg-blue" id="album-submit">确认发送</a>
		    </div>
		</div>
  </div>
  
  <!-- 学生组织架构 start -->
	<div id="xs_div_box" class="weui_tab tab-bottom" style="display:none; z-index:600; background-color: #f8f8f8;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
				<h1 class="weui-header-title">培立实验小学班级列表</h1>
			</div>
	        <!--下拉选择-->
	        <div class="page-bd">  
	          <ul id="studentList">
	     	  </ul>
	    	</div>
	    	<script id="student-table-template1" type="text/x-handlebars-template">
	    		{{#each list}}
	    			<li class="list1" style="margin: 0;">
           				<div class="weui_cells" style="margin: 0;">
                    		<div class="weui_cell" style="padding: 20px 15px;">
								<div class="weui_cell_hd list_c2"  style="margin-right: 10px;">
									<label class="weui_cells_checkbox weui_check_label" for="{{grade}}_{{clazz}}">
										<div class="weui_cell_hd">
											<input type="checkbox" class="weui_check" value="{{grade}}_{{clazz}}" id="{{grade}}_{{clazz}}">
			        						<i class="weui_icon_checked icon-35"></i>
										</div>
									</label>
								</div>
								<div class="weui_cell_bd weui_cell_primary">
									<p>{{gradeText}}（{{clazz}}）班</p>
								</div>
							</div>
						</div>
	            	</li>
	            {{/each}}
			</script>
	    	<script id="student-table-template" type="text/x-handlebars-template">
				{{#each list}}
					<li class="list1">
		                <div class="weui-flex js-category">
		                	<span class="list_c1 mui-radio">
							</span>
		                   	<p class="weui-flex-item"> {{gradeText}}</p>
		                    <i class="icon icon-74"></i> 下级
		                </div>
		                <div class="page-category js-categoryInner">
							{{#each subList}}
		                    	<div class="weui_cells" style="margin: 0;">
		                    		<div class="weui_cell">
										<div class="weui_cell_hd list_c2" style="margin-right: 10px;">
											<label class="weui_cells_checkbox weui_check_label" for="{{grade}}_{{clazz}}">
												<div class="weui_cell_hd">
													<input type="checkbox" class="weui_check" value="{{grade}}_{{clazz}}" id="{{grade}}_{{clazz}}">
					        						<i class="weui_icon_checked"></i>
												</div>
											</label>
										</div>
										<div class="weui_cell_bd weui_cell_primary">
											<p>{{gradeText}}（{{clazz}}）班</p>
										</div>
									</div>
								</div>
							{{/each}}
		                </div>
		            </li>
				{{/each}}	    	
	    	</script>
	       </div>
	   		<!--End下拉选择-->
	   		<div class="weui_tabbar">
				<div class="fsdx_tabbar">
		            <span class="left">班级：<label id="studentText"></label></span>
		            <span class="right" id="studentSure"><a href="javascript:">确定</a></span>
		        </div>
			</div>
		</div>
	</div>
	
  <jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
  <script type="text/javascript">
  	var studentData = {};
  	$(function() {
  		initHandingAttach();
  		//初始化班级架构
		loadStudent();
		$("#album-submit").click(function() {
			noticeSubmit();
		});
		$('.js-category').on("click", function(){
			$parent = $(this).closest('li');
		    if($parent.hasClass('js-show')){
                $parent.removeClass('js-show');
                $parent.find('i').removeClass('icon-35').addClass('icon-74');
            }else{
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
                $parent.find('i').removeClass('icon-74').addClass('icon-35');
            }
	    });
		//学生组织架构弹出
      	$("#xs_div").click(function() {
      		$("#xs_div_box").show();
      		//上下级拉动
			
			$(".list_c2 input").click(function() {
				var list = $("#studentList").find(".list1 input:checked");
				list.each(function(i, v){
					v.checked = false;
				});
				$(this)[0].checked = true;
				var text = $(this).closest(".weui_cell").find(".weui_cell_primary p").html();
				$("#studentText").html(text);
				$(".weui_cell_ft").html(text);
			});
			
	      	$("#studentSure").click(function() {
				$("#xs_div_box").hide();
				var length = $("#studentList").find(".list1 input:checked").length;
				if(length == 0){
					$(".weui_cell_ft").html("请选择");
				}
	      	})
      	});
  	});
  	function loadStudent() {
		$.ajax({
	 		url : basePath + "/teacherClass",
	 		type : "post",
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data != null && data.length > 0) {
	 				studentData.list = data;
	 				loadStudentHtml(studentData);
	 			}
	 		}, error:function(){
	 			alert("查询异常");
   			}
	 	});
	}
	function loadStudentHtml(studentData) {
		var myTemplate;
		if(studentData.list[0].subList) {
			myTemplate = Handlebars.compile($("#student-table-template").html());
		}else {
			myTemplate = Handlebars.compile($("#student-table-template1").html());
		}
		Handlebars.registerHelper("equal", function(v1,v2,options) {
    		if(v1 == v2) {
    			//满足添加继续执行
    			return options.fn(this);
    		}else {
    			//不满足条件执行{{else}}部分
    			return options.inverse(this);
    		}
    	});
		$('#studentList').html(myTemplate(studentData));
	}
	
	function initHandingAttach() {
		$.ajax({
	 		url : basePath + "/ls/attchment/handing",
	 		type : "post",
	 		dataType : "json",
	 		data: {
	 			relationType: "${relationType}"
	 		},
	 		async : false,
	 		success : function(data) {
	 			if(data != null && data.length > 0) {
	 				for(var itm in data) {
	 					if(data[itm].attachmentType == 'image') {
	 						$('#img1').append('<li class="weui_uploader_file" data-id="'+data[itm].id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data[itm].attachmentUrl +'"/></li>');
	 					}
	 				}
	 			}
	 		}, error:function(){
	 			alert("查询异常");
   			}
	 	});
	}
	function noticeSubmit() {
		var imglength = $("#img1").find("li").length;
		if(imglength == 0) {
			alert("请选择上传图片");
			return;
		}
		var content = $("#content").val();
		if(content.trim().length==0){
			alert("请输入通知内容");
			return;
		}
		if(content.length > 2000) {
			alert("您输入的内容过长，不能超过2000字符");
			return;
		}
		if($(".weui_cell_ft").html() == "请选择") {
			alert("请选择发送对象");
			return;
		}
		var gradeClass = $($("#studentList").find(".list1 input:checked")).val();
		$.ajax({
	 		url : basePath + "/ls/album/create",
	 		type : "post",
	 		data : {
	 			gradeClass: gradeClass,
	 			content: content
	 		},
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code == '000') {
	 				$.toast("班级相册创建成功");
	 				setTimeout(function() {
	 					var array = gradeClass.split("_");
		 				window.location.href = basePath + "/ls/album/class?grade=" + array[0] + "&clazz=" + array[1];
 			        }, 2000)
	 			}else{
	 				$.toast(data.msg, "cancel");
	 			}
	 		}, error:function(){
	 			$.toast("提交异常", "cancel");
   			}
	 	});
	}
	//拍照或从手机相册中选图接口
    $('#filePicker').on('click', function () {
        wx.chooseImage({
            count: 9,
            needResult: 1,
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
           		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
           		wxuploadImage(localIds);
            },
            fail: function (res) {
                alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
            }

        });
    });
	function wxuploadImage(localIds) {  
		var localId = localIds.pop();
        wx.uploadImage({  
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得  
            isShowProgressTips: 1, // 默认为1，显示进度提示  
            success: function (res) {  
                mediaId = res.serverId; // 返回图片的服务器端ID  
                wechatMediaDownload(mediaId);
                if(localIds.length > 0){
                	wxuploadImage(localIds);
                }
            },  
            fail: function (error) {  
                alert(Json.stringify(error));  
            }  
        });
   }  
	function wechatMediaDownload(mediaId) {
	   	var params = {};
	   	params.mediaId = mediaId;
        params.attachmentType = "image";
        params.relationType = "${relationType}";
        $.ajax({
	 		url : basePath + "/ls/attchment/upload/wx",
	 		type : "post",
	 		data : params,
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code != '000') {
	 				$.toast(data.msg, "cancel");
	 			}else {
	 				$('#img1').append('<li class="weui_uploader_file" data-id="'+data.data.id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data.data.attachmentUrl +'"/></li>');
	 			}
	 		}, error:function(){
	 			alert("上传异常");
      		}
	 	});
   }
  </script>
</body>
</html>